<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博雅互动</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
			font-size: 14px;
			font-family: "Arail","Microsoft YaHei","SimSun";
        }
        .nomargin{
            margin: 0 !important;
        }
        .header{
            width: 100%;
            height: 58px;
            background-color: #191D3A;
        }
        .inner_c{
            width: 1000px;
            margin: 0 auto; 
        }
        .logo{
            float: left;
            padding:10px 0 0 20px;
        }
        h1{
            height: 35px;
            width: 157px;
            text-indent: -999em;
            background: url(images/icons.png) no-repeat 0 0 ;
        }
        .logo a{
            display: block;
            height: 35px;
            width: 157px;
        }
        .header .inner_c .nav{
            float: left;
            margin-left: 48px;
            width: 603px;
            height: 58px;
        }
        .header .inner_c .nav ul{
            list-style: none;
            overflow: hidden;
        }
        .header .inner_c .nav ul li{
            float: left;
            width: 85px;
            height: 58px;
            border-right: 1px solid #252947;
        }
        .header .inner_c .nav ul li.first{
            border-left: 1px solid #252947;
        }
        .header .inner_c .nav ul li.current a{
            color: white;
            background-color: #252947;
        }
        .header .inner_c .nav ul li a{
            display: block;
            height: 58px;
            text-align: center;
            line-height: 58px;
            text-decoration: none;
            color:#818496;
        }
        .header .inner_c .nav ul li a:hover{
            color: #fff;
            background-color: #818496;
        }
        .joinus{
            float: left;
            width: 100px;
            height: 33px;
            margin: 12px 0 0 52px;
        }
        .joinus a{
            display: block;
            width: 100px;
            height: 33px;
            background: url(images/icons.png) no-repeat 0 -35px;
            background-color: steelblue;
        }
        .joinus a:hover{
            background: url(images/icons.png) no-repeat 0 -69px;
        }
        .banner{
            height:567px;
            position: relative;
            /* background-color: #80D1EF; */
            overflow: hidden;
            background: url(images/bj.jpg) repeat-x;
        }
        .banner img{
            position: absolute;
            left: 50%;
            margin-left: -960px;
        }
        .banner .check{
            width: 94px;
            height: 12px;
            position: absolute;
            left: 50%;
            bottom: 20px;
            margin-left: -47px;
        }
        .banner .check ol{
            list-style: none;
            overflow: hidden;
        }
        .banner .check ol li{
            float: left;
            height: 12px;
            width: 12px;
            background: url(images/icons.png) no-repeat -101px -36px;
            margin-right: 15px;
            cursor: pointer; /*-变小手-*/
        }
        .banner .check .cur{
            background: url(images/icons.png) no-repeat -113px -36px;
        }
        .product{
            margin-top: 50px;
            height: 229px;
            border-bottom: 1px solid red;
            position: relative;
        }
        .product ul{
            list-style: none;
        }
        .product ul li{
            float: left;
            width: 218px;
            margin-right: 43px;
        }
        .product ul li.last{
            width: 217px;
        }
        .product ul li a{
            display: block;
            padding-bottom: 20px; /* 没有设计图 这个距离自定义 */
            text-decoration: none;
            /*CSS3的过渡属性：*/
			transition:all 1s ease 0s;
        }
        .product ul li a img{
            display: block;
        }
        .product ul li a span{
            text-align: center;
            display: block;
        }
        .product ul li a span.c{
            display: block; 
            line-height: 40px;
            font-weight: bold;
        }
        .product ul li a span.e{
            font-size: 12px;
 			line-height: 12px;
 			color:#38B774;
        }
        .product ul li a span.e b{
            font-weight: normal;
            padding-right: 12px;
            background: url(images/arrow.png) no-repeat right center; 
        }
        .product ul li a:hover {
            background-color:seagreen;
        }
        .product ul li a:hover span.e,a:hover span.c{
            color: #fff; 
        }
        .product ul li a:hover span b{
            background: url(images/arrow2.png) no-repeat right center; 
        }
        .xuanze{
            position: absolute;
            width: 117px;
			height: 12px;
            left: 50%;
            bottom: -6px;
            margin-left: -59px;
            background: white;
        }
        .xuanze ol{
            padding-left: 17px;
            list-style: none;
        }
        .xuanze ol li{
            float: left;
            width: 12px;
            margin-right: 14px;
            height: 12px;
            background: url(images/icons.png) no-repeat -101px -36px;
            cursor: pointer;
        }
        .information{
            height: 366px;
            margin-top: 53px;
            background: url(images/shan.jpg) no-repeat center bottom;
        }
        .information .news{
            position: relative;
        }
        .information .news .hd{
            float: left;
            height: 310px;
            width: 500px;
            background: url(images/news_hd.jpg) no-repeat; 
        }
        .information .news .hd h3{
            height: 0;
            overflow: hidden;
        }
        .information .more{
            position: absolute;
            left: 219px;
            top: 40px;
        }
        .information .more a{
            display: block;
            text-decoration: none;
            text-align:center;
            height: 26px;
            width: 64px;
            border: 1px solid green;
            color: green;
            border-radius: 5px;
        }
        .information .more a span{
            display: block;
            text-align:center;
            line-height: 20px;
        }
        .information .more a:hover{
            color:white;
            background-color: green;
        }
        .information .news .bd{
            padding: 110px 20px 0 20px;
        }
        .information .news .bd ul{
            list-style: none;
        }
        .information .news .bd ul li{
            line-height: 50px;
            border-bottom: 1px solid #333;
        }
        .information .news .bd ul li .date{
            margin-right: 21px;
			color:#333;
			font-size: 12px;       
        }
        .information .news .bd ul li a{
            text-decoration: none;
            color:#444866;
        }
        .information .news .bd ul li a:hover{
            color:#33B972;
        }
        .information .jobs{
            position: relative;
            float: left;
            height: 310px;
            width: 500px;
            background: url(images/jobs_bg.jpg) no-repeat; 
        }
        .information .jobs .more a{
            border: 1px solid white;
            color: white;
        }
        .information .jobs .more a span{
            display: block;
            text-align:center;
            line-height: 20px;
        }
        .information .jobs .more a:hover{
            color:green;
            background-color: white;
        }
        .jobs .job_hd h3{
            padding-top: 44px;
            padding-left: 81px;
        }
        .jobs .job_hd h3 span{
            display: block;
            color: white;     
        }
        .jobs .job_hd h3 span.c{
            font-size: 28px;
			line-height: 28px;
        }
        .jobs .job_hd h3 span.e{
            font-size: 12px;
			font-weight: normal;
			line-height: 22px;
        }
        .jobs .job_bd{
            padding-left: 20px;
            padding-right: 175px;
        }
        .jobs .job_bd h4{
            line-height: 22px;
			font-size: 14px;
            color: white;
        }
        .jobs .job_bd ul{
            list-style: none;
        }
        .jobs .job_bd ul li{
            height: 37px;
            line-height: 37px;
            border-bottom: 1px solid  #6FDEA3;
        }
        .jobs .job_bd ul li a{
            color: white;
            text-decoration: none;
        }
        .jobs .job_bd ul li a:hover{
            color: yellow;
        }
        .footer{
            width: 100%;
            height: 91px;
			line-height: 91px;
			background-color: #191D3A;
			color:#6c6e7e;
            position: relative;
        }
        .footer .link{
            float: left;
            font-size: 12px;
        }
        .footer .link a{
            text-decoration: none;
            color:#6c6e7e;
        } 
        .footer .copyright{
            float: left;
            height: 91px;
            line-height: 91px;
            font-size: 12px;
            padding-left: 190px;
        }
        .footer .copyright a{
            text-decoration: none;
            color:#6c6e7e;
        }
        .govicon{
            width: 40px;
            position: absolute;
            top: 19px;
            right: 170px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="inner_c">
            <div class="logo">
                <h1><a href="">博雅互动-最专业的游戏网站</a></h1>
            </div>
            <div class="nav">
                <ul>
                    <li class="first current"><a href="">首页</a></li>
                    <li><a href="">博雅游戏</a></li>
                    <li><a href="">博雅新闻</a></li>
                    <li><a href="">关于我们</a></li>
                    <li><a href="">客服中心</a></li>
                    <li><a href="">投资者关系</a></li>
                    <li><a href="">校园大使</a></li>
                </ul>
            </div>
            <div class="joinus">
                <a href=""></a>
            </div>
        </div>
    </div>
    <div class="banner">
        <img src="images/banner1.jpg" alt="">
        <div class="check">
            <ol>
                <li class="cur"></li>
                <li></li>
                <li></li>
                <li class="nomargin"></li>
            </ol>
        </div>
    </div>
    <!-- 产品 -->
    <div class="product inner_c">
        <ul>
            <li>
                <a href="">
                    <img src="images/pro1.png" alt="">
                    <span class="c">四川麻将</span>
                    <span class="e"><b>SICHUAN MAJIANG</b></span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/pro1.png" alt="">
                    <span class="c">四川麻将</span>
                    <span class="e"><b>SICHUAN MAJIANG</b></span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/pro1.png" alt="">
                    <span class="c">四川麻将</span>
                    <span class="e"><b>SICHUAN MAJIANG</b></span>
                </a>
            </li>
            <li class="last nomargin">
                <a href="">
                    <img src="images/pro1.png" alt="" width="217px">
                    <span class="c">四川麻将</span>
                    <span class="e"><b>SICHUAN</b></span>
                </a>
            </li>
        </ul>
        <div class="xuanze">
            <ol>
                <li></li>
                <li></li>
                <li></li>
                <li class="nomargin"></li>
            </ol>
        </div>
    </div>
    <!-- news 和 jobs -->
    <div class="information inner_c">
        <div class="news">
            <div class="hd">
                <h3>博雅新闻</h3>
                <div class="bd">
                    <ul>
                        <li class="first">
                            <span class="date">11 / 18</span>
                            <span class="title">
                                <a href="#">博雅互动荣获中国融资上市公司大奖之最具潜力上市公司奖</a>
                            </span>
                        </li>
                        <li>
                            <span class="date">11 / 18</span>
                            <span class="title">
                                <a href="#">博雅互动荣获中国融资上市公司大奖之最具潜力上市公司奖</a>
                            </span>
                        </li>
                        <li>
                            <span class="date">11 / 18</span>
                            <span class="title">
                                <a href="#">博雅互动荣获中国融资上市公司大奖之最具潜力上市公司奖</a>
                            </span>
                        </li>
                        <li>
                            <span class="date">11 / 18</span>
                            <span class="title">
                                <a href="#">博雅互动荣获中国融资上市公司大奖之最具潜力上市公司奖</a>
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="more">
                <a href=""><span>MORE<sup>+</sup></span></a>
            </div>

        </div>
        <div class="jobs">
            <div class="more">
                <a href=""><span>MORE<sup>+</sup></span></a>
            </div>
            <div class="job_hd">
                <h3>
                    <span class="c">专场招聘</span>
                    <span class="e">BOYA JOBS</span>
                </h3>
            </div>
            <div class="job_bd">
                <h4>专场招聘岗位：</h4>
                <ul>
                    <li><a href="">PHP开发工程师</a></li>
                    <li><a href="">PHP开发工程师</a></li>
                    <li><a href="">PHP开发工程师</a></li>
                    <li><a href="">PHP开发工程师</a></li>			
                </ul>
            </div>
        </div>
    </div>
    <!-- foot -->
    <div class="footer">
        <div class="inner_c">
            <div class="link">
                <a href=""><span>网站地图</span></a>
                <span>|</span>
                <a href=""><span>免责声明</span></a>
            </div>
            <div class="copyright">
                Copyright © 2004 - 2016 博雅互动(Boyaa Interactive) 
				<a href="">粤ICP备05062536号</a>
                增值电信业务经营许可证：粤B2-20110513
            </div>
            <img src="images/govIcon.gif" alt="" class="govicon">
        </div>
    </div>
</body>
</html>